<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 下拉框
            父级标签： select
            子级标签： option    子下拉框选项
                       optgroup  子下拉框分组

        注意:
        * select    赋予name属性
        * option    赋予value属性
        * optgroup  赋予label属性
        

        HTMl: 只负责展示内容(文字,图片,音频,视频等信息)
        CSS: 只负责梅花HTML
        JS: 只负责页面特效 + 数据处理        
     -->

     <select name="province">
         <option value="1">河南</option>
         <option value="2">江苏</option>
         <option value="3">山西</option>
         <option value="4">吉林</option>
     </select>

     <select name="city">
         <option value="1-1">郑州</option>
         <option value="1-2">开封</option>
         <option value="1-3">洛阳</option>
         <option value="1-4">商丘</option>
     </select>
     <hr>

     <select name="">
         <optgroup label="河南">
             <option value="1-1">郑州</option>
             <option value="1-2">洛阳</option>
             <option value="1-3">开封</option>
             <option value="1-4">商丘</option>
         </optgroup>
         <optgroup labe="江苏">
             <option value="1-1">南京</option>
             <option value="1-2">江苏</option>
             <option value="1-3">无锡</option>
             <option value="1-4">常州</option>
             <option value="1-5">扬州</option>
             <option value="1-6">泰州</option>
         </optgroup>
     </select>
</body>
</html>